<style scoped>
  .upload-item{width:6rem;height:5rem;background-size:100%; background: #eeeeee96;
    padding-top: 15px;
    box-sizing: border-box;
  }
  .upload-item .img{    
    width: 3.5rem;
    height: 3.5rem;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
  }
  .upload-item a{display: block;width:100%;height:100%;position: absolute;left:0;top:0;}
  .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
  .title{padding:25px 10px 15px}
</style>
<template>
  <wrap title="拍摄身份证"> 
    <div slot="page" class="light-bg" style="padding-bottom: 20px;">
      <input class="hide" type="file" ref="file" @change="upload" accept="image/*">
      <p class="text-center title">请拍摄您的中国第二代居民身份证原件</p>
      <div class="id-card">
        <div class="flex flex-justify-around margin-top">
          <a href="javascript:;" @click="trigger('idPositive')" class="upload-item relative">
            <div class="img" :style="{backgroundImage:'url('+idPositive+')'}"></div>
            <p class="text-center grey-9 margin-top">身份证正面</p>
          </a>
        </div>
      </div>
      <div class="id-card padding-top">
        <div class="flex flex-justify-around margin-top">
          <a href="javascript:;" @click="trigger('idOpposite')" class="upload-item relative">
            <div class="img" :style="{backgroundImage:'url('+idOpposite+')'}"></div>
            <p class="text-center grey-9 margin-top">身份证反面</p>
          </a>
        </div>  
      </div>
      <!-- <div class="id-card padding-top">
        <div class="flex flex-justify-around margin-top">
          <a href="javascript:;" @click="trigger('userPositive')" class="upload-item upload-item relative">
            <div class="img" :style="{backgroundImage:'url('+userPositive+')'}"></div>
            <p class="text-center grey-9 margin-top">手持身份证照片</p>
          </a>
        </div>
      </div> -->
      <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="next()">提交</a>
    </div>
    
  </wrap>
</template>
<script>
    import wrap from '../../components/wrap.vue'
    import '../../assets/plugin/lrz.js'
    export default {
      components: {wrap},
      data () {
        return {
          nextEnable: false,
          type: '',
          defaultIdPositive: '',
          defaultIdOppositive: '',
          defaultUserPositive: '',
          verify: {
            idPositive: '',
            idOpposite: '',
            userPositive: ''
          },
          file: {
            idPositive: '',
            userPositive: ''
          }
        }
      },
      computed: {
        idPositive () {
          return this.verify.idPositive || this.defaultIdPositive
        },
        idOpposite () {
          return this.verify.idOpposite || this.defaultIdOppositive
        },
        userPositive () {
          return this.verify.userPositive || this.defaultUserPositive
        }
      },
      created () {
        const self = this
        let caaFlag = 3
        self.$api.fill.getAttachment(caaFlag).then(res => {
          if (res.code === 0) {
            let data = res.data
            if (data.length !== 0) {
              data.forEach(function (item) {
                if (item.caaNickname === 'idPositive') {
                  self.verify.idPositive = item.caaUrl
                } else if (item.caaNickname === 'idOpposite') {
                  self.verify.idOpposite = item.caaUrl
                } else if (item.caaNickname === 'userPositive') {
                  self.verify.userPositive = item.caaUrl
                }
              }, this)
            }
          }
        })
        self.$watch('verify', () => {
          if (self.verify.idPositive && self.verify.idOpposite) {
            self.nextEnable = true
          } else {
            self.nextEnable = false
          }
        }, {deep: true})
      },
      methods: {
        trigger (type) {
          const self = this
          self.type = type
          self.$refs.file.click()
        },
        upload (e) {
          const self = this
          const file = e.target.files[0]
          if (!file) { return }// 选第二张时取消会触发change的bug
          /* eslint-disable*/
          self.$Indicator.open()
          lrz(file, { width: 1000 }).then(img => {
            let form = new FormData()
            form.append('image', img.file)
            form.append('length', img.fileLen)
            self.$api.fill.upload(form).then( res => {
              self.$Indicator.close()
              if (res.code === 0) {
                switch (self.type) {
                  case 'idPositive':
                    self.verify.idPositive = res.data.url
                    self.defaultIdPositive =  res.data.url
                    self.file.idPositive = img.file
                    break
                  case 'idOpposite':
                    self.verify.idOpposite = res.data.url
                    self.defaultIdOppositive =  res.data.url
                    break
                  case 'userPositive':
                    self.verify.userPositive = res.data.url
                    self.defaultUserPositive =  res.data.url
                    self.file.userPositive = img.file
                    break
                }
              } else {
                self.$Toast(res.userMsg)
              }
            })
          }).always(function () {
            self.$Indicator.close()
          })
        },
        next () {
          const self = this
          if (!self.nextEnable) {
            return
          }
          const data = new FormData()
          data.append('idPositive', self.file.idPositive)
          data.append('userPositive', self.file.userPositive)
          const saveData = []
          for (const i in self.verify) {
            saveData.push(
              {
                caaNickname: i,
                caaUrl: self.verify[i],
                caaName: i === 'idPositive' ? '身份证正面' : i === 'idOpposite' ? '身份证反面' : i === 'userPositive' ? '手持身份证照片' : '',
                caaFlag: 3
              })
          }
          data.append('data', JSON.stringify(saveData))
          data.append('type', 3)
          self.$Indicator.open()
          self.$api.fill.saveAttachment(data).then(res => {
            self.$Indicator.close()
            if (res.code === 0) {
              // self.$router.push('/detail/addition')
              self.$router.go(-1)
            } else {
              self.$Toast(res.userMsg)
            }
          }).always(function () {
            self.$Indicator.close()
          })
        }
      }
    }
</script>
    